<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>北京西大校友管理系统</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/static/ace/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="/static/ace/components/font-awesome/css/font-awesome.css" />
		<link rel="stylesheet" href="/static/ace/components/_mod/jquery-ui/jquery-ui.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="/static/ace/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="/static/ace/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/static/ace/assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/static/ace/assets/css/ace-skins.css" />
		<link rel="stylesheet" href="/static/ace/assets/css/ace-rtl.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/static/ace/assets/css/ace-ie.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/static/ace/assets/js/ace-extra.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/static/ace/components/html5shiv/dist/html5shiv.min.js"></script>
		<script src="/static/ace/components/respond/dest/respond.min.js"></script>
		<![endif]-->
		<!--[if !IE]> -->
		<script src="/static/ace/components/jquery/dist/jquery.js"></script>
		<script src="/static/js/jquery.cookie.js"></script>
		<!-- <![endif]-->
		<script type="text/javascript">
			console.log($.cookie('key'));
			if ($.cookie('key') == null) {
				console.log("jquery cookie");
				$(location).attr('href', '/user/login');
				// console.log("jquery cookie");
				// location.href("/user/login");
			}
		</script>
	</head>

	<body class="no-skin">
		<!-- #section:basics/navbar.layout -->
		<div id="navbar" class="navbar navbar-default          ace-save-state">
			<div class="navbar-container ace-save-state" id="navbar-container">
				<!-- #section:basics/sidebar.mobile.toggle -->
				<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
					<span class="sr-only">Toggle sidebar</span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>
				</button>

				<!-- /section:basics/sidebar.mobile.toggle -->
				<div class="navbar-header pull-left">
					<!-- #section:basics/navbar.layout.brand -->
					<a href="#" class="navbar-brand">
						<small>
							<i class="fa fa-leaf"></i>
							北京西大校友管理系统
						</small>
					</a>

					<!-- /section:basics/navbar.layout.brand -->

					<!-- #section:basics/navbar.toggle -->

					<!-- /section:basics/navbar.toggle -->
				</div>

				<!-- #section:basics/navbar.dropdown -->
				<div class="navbar-buttons navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
							
						<!-- #section:basics/navbar.user_menu -->
						<li class="light-blue dropdown-modal">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<span class="user-info" style="margin-top:10px;">
									用户
								</span>
								<i class="ace-icon fa fa-caret-down"></i>
							</a>

							<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

								<li>
									<a href="javascript:window.location.href='/user/login'">
										<i class="ace-icon fa fa-power-off"></i>
										退出登录
									</a>
								</li>
							</ul>
						</li>

						<!-- /section:basics/navbar.user_menu -->
					</ul>
				</div>

				<!-- /section:basics/navbar.dropdown -->
			</div><!-- /.navbar-container -->
		</div>

		<!-- /section:basics/navbar.layout -->
		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>

			<!-- #section:basics/sidebar -->
			<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
				<script type="text/javascript">
					try{ace.settings.loadState('sidebar')}catch(e){}
				</script>


				<ul class="nav nav-list">
						<li >
								<a href="/admin/user/dashboard">
									<i class="menu-icon fa fa-tachometer"></i>
									<span class="menu-text"> 用户分析 </span>
								</a>
		
								<b class="arrow"></b>
							</li>
					<li class="active open">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-list"></i>
							<span class="menu-text"> 用户管理 </span>

							<b class="arrow fa fa-angle-down"></b>
						</a>

						<b class="arrow"></b>

						<ul class="submenu">
							<li class="active">
								<a href="/admin/user/list">
									<i class="menu-icon fa fa-caret-right"></i>
									用户列表
								</a>

								<b class="arrow"></b>
							</li>

							<li class="">
								<a href="/admin/user/adduserpage">
									<i class="menu-icon fa fa-caret-right"></i>
									添加用户
								</a>

								<b class="arrow"></b>
							</li>
						</ul>
					</li>
				</ul><!-- /.nav-list -->

				<!-- #section:basics/sidebar.layout.minimize -->
				<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
					<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
				</div>

				<!-- /section:basics/sidebar.layout.minimize -->
			</div>

			<!-- /section:basics/sidebar -->
			<div class="main-content">
				<div class="main-content-inner">
					<!-- #section:basics/content.breadcrumbs -->


					<!-- /section:basics/content.breadcrumbs -->
					<div class="page-content">

						<div class="page-header">
							<h1>
								用户管理
								<small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									用户列表
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row" id="userlistdiv">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row" >
										<div class="col-xs-12">
											<div class="clearfix">
												<div class="pull-right tableTools-container"></div>
											</div>
											<div class="table-header">
												用户查询结果
												<!-- {{.UserList|len}} -->
												<!-- {{index .UserList 0}} -->
											</div>
	
											<!-- div.table-responsive -->
	
											<!-- div.dataTables_borderWrap -->
											<div>
												<table id="dynamic-table" class="table table-striped table-bordered table-hover">
													<thead>
														<tr>
															<th class="center">
																<label class="pos-rel">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"></span>
																</label>
															</th>
															<th>手机号</th>
															<th>姓名</th>
															<th class="hidden-480">性别</th>
	
															<th>
																<i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
																出生年月
															</th>
															<!-- <th class="hidden-480">年龄</th> -->
															<!-- <th class="hidden-480">电子邮箱</th> -->
															<th class="hidden-480">工作单位</th>
															<th></th>
														</tr>
													</thead>
	
													<tbody>
															<!-- {{.Total}} -->
															{{range .UserList}}
														<tr>
															<td class="center">
																<label class="pos-rel">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"></span>
																</label>
															</td>
	
															<td>
																{{.Mobile}}
															</td>
															<td>
																	{{.Name}}
																</td>
															<!-- <td>$20</td>
															<td>$20</td> -->
															<td class="hidden-480">{{.Sex}}</td>
															<td>{{.BirthDate}}</td>
	
															<td class="hidden-480">
																	{{.Company}}
																<!-- <span class="label label-sm label-info arrowed arrowed-righ"></span> -->
															</td>
	
															<td>
																<div class="hidden-sm hidden-xs action-buttons">
																	<!-- <a class="blue" href="#">
																		<i class="ace-icon fa fa-search-plus bigger-130"></i>
																	</a> -->
	
																	<a class="green" href="javascript:window.location.href='/admin/user/updateuserpage/{{.ID.Hex}}'">
																		<i class="ace-icon fa fa-pencil bigger-130"></i>
 																	</a>
																	
																	<a id="deleteuser" href="javascript:;" onclick="delete_user('{{.ID.Hex}}')" class="red" >
																		<i class="ace-icon fa fa-trash-o bigger-130"></i>
																	</a>
																</div>
	
																<div class="hidden-md hidden-lg">
																	<div class="inline pos-rel">
																		<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
																			<i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
																		</button>
	
																		<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
																			<li>
																				<a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																					<span class="blue">
																						<i class="ace-icon fa fa-search-plus bigger-120"></i>
																					</span>
																				</a>
																			</li>
	
																			<li>
																				<a href="#"  class="tooltip-success" data-rel="tooltip" title="Edit">
																					<span class="green" >
																						<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
																					</span>
																				</a>
																			</li>
																			
	
																			<li>
																				<a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																					<span class="red">
																						<i class="ace-icon fa fa-trash-o bigger-120"></i>
																					</span>
																				</a>
																				<div id="dialog-message" class="hide">
																						<p>
																							是否确认删除用户？
																						</p>
																					</div><!-- #dialog-message -->
																			</li>
																		</ul>
																	</div>
																</div>
															</td>
														</tr>
														{{end}}
													</tbody>
												</table>
											</div>
										</div>
									</div>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->

					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<div class="footer">
				<div class="footer-inner">
					<!-- #section:basics/footer -->
					<div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">北京西大校友联盟</span>
							后台管理系统 &copy; 2017-2018
						</span>

					</div>

					<!-- /section:basics/footer -->
				</div>
			</div>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/static/ace/components/jquery/dist/jquery.js"></script>
		<!-- <![endif]-->

		<!--[if IE]>
<script src="/static/ace/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/static/ace/components/_mod/jquery.mobile.custom/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
		<script src="/static/ace/components/bootstrap/dist/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->
		<script src="/static/ace/components/jquery-ui/jquery-ui.js"></script>
		<script src="/static/ace/components/datatables/media/js/jquery.dataTables.js"></script>
		<script src="/static/ace/components/_mod/datatables/jquery.dataTables.bootstrap.js"></script>
		<script src="/static/ace/components/datatables.net-buttons/js/dataTables.buttons.js"></script>
		<script src="/static/ace/components/datatables.net-buttons/js/buttons.flash.js"></script>
		<script src="/static/ace/components/datatables.net-buttons/js/buttons.html5.js"></script>
		<script src="/static/ace/components/datatables.net-buttons/js/buttons.print.js"></script>
		<script src="/static/ace/components/datatables.net-buttons/js/buttons.colVis.js"></script>
		<script src="/static/ace/components/datatables.net-select/js/dataTables.select.js"></script>

		<!-- ace scripts -->
		<script src="/static/ace/assets/js/src/elements.scroller.js"></script>
		<script src="/static/ace/assets/js/src/elements.colorpicker.js"></script>
		<script src="/static/ace/assets/js/src/elements.fileinput.js"></script>
		<script src="/static/ace/assets/js/src/elements.typeahead.js"></script>
		<script src="/static/ace/assets/js/src/elements.wysiwyg.js"></script>
		<script src="/static/ace/assets/js/src/elements.spinner.js"></script>
		<script src="/static/ace/assets/js/src/elements.treeview.js"></script>
		<script src="/static/ace/assets/js/src/elements.wizard.js"></script>
		<script src="/static/ace/assets/js/src/elements.aside.js"></script>
		<script src="/static/ace/assets/js/src/ace.js"></script>
		<script src="/static/ace/assets/js/src/ace.basics.js"></script>
		<script src="/static/ace/assets/js/src/ace.scrolltop.js"></script>
		<script src="/static/ace/assets/js/src/ace.ajax-content.js"></script>
		<script src="/static/ace/assets/js/src/ace.touch-drag.js"></script>
		<script src="/static/ace/assets/js/src/ace.sidebar.js"></script>
		<script src="/static/ace/assets/js/src/ace.sidebar-scroll-1.js"></script>
		<script src="/static/ace/assets/js/src/ace.submenu-hover.js"></script>
		<script src="/static/ace/assets/js/src/ace.widget-box.js"></script>
		<script src="/static/ace/assets/js/src/ace.settings.js"></script>
		<script src="/static/ace/assets/js/src/ace.settings-rtl.js"></script>
		<script src="/static/ace/assets/js/src/ace.settings-skin.js"></script>
		<script src="/static/ace/assets/js/src/ace.widget-on-reload.js"></script>
		<script src="/static/ace/assets/js/src/ace.searchbox-autocomplete.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				//initiate dataTables plugin
				var myTable = 
				$('#dynamic-table')
				//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
				.DataTable( {
					bAutoWidth: false,
					//服务端处理分页
					// "serverSide": true,
					language: {
       "sProcessing": "处理中...",
       "sLengthMenu": "显示 _MENU_ 项结果",
       "sZeroRecords": "没有匹配结果",
       "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
       "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
       "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
       "sInfoPostFix": "",
       "sSearch": "搜索:",
       "sUrl": "",
       "sEmptyTable": "表中数据为空",
       "sLoadingRecords": "载入中...",
       "sInfoThousands": ",",
       "oPaginate": {
           "sFirst": "首页",
           "sPrevious": "上页",
           "sNext": "下页",
           "sLast": "末页"
       },
       "oAria": {
           "sSortAscending": ": 以升序排列此列",
           "sSortDescending": ": 以降序排列此列"
       }
},
					'bStateSave': true,
					"aoColumns": [
					  { "bSortable": false },
					  null, null,null, null, null,
					  { "bSortable": false }
					],
					"aaSorting": []
					// ,
			
					// select: {
					// 	style: 'multi'
					// }
			    } );
			
				
				
				$.fn.dataTable.Buttons.swfPath = "/static/ace/components/datatables.net-buttons-swf/index.swf"; //in Ace demo /static/ace/components will be replaced by correct assets path
				$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
				
				myTable.buttons().container().appendTo( $('.tableTools-container') );
				
				//style the message box
				var defaultCopyAction = myTable.button(1).action();
				myTable.button(1).action(function (e, dt, button, config) {
					defaultCopyAction(e, dt, button, config);
					$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
				});
				
				
				var defaultColvisAction = myTable.button(0).action();
				myTable.button(0).action(function (e, dt, button, config) {
					
					defaultColvisAction(e, dt, button, config);
					
					
					if($('.dt-button-collection > .dropdown-menu').length == 0) {
						$('.dt-button-collection')
						.wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
						.find('a').attr('href', '#').wrap("<li />")
					}
					$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
				});
			
				////
			
				setTimeout(function() {
					$($('.tableTools-container')).find('a.dt-button').each(function() {
						var div = $(this).find(' > div').first();
						if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
						else $(this).tooltip({container: 'body', title: $(this).text()});
					});
				}, 500);
				
				
				/////////////////////////////////
				//table checkboxes
				$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
				
			
				$(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
					e.stopImmediatePropagation();
					e.stopPropagation();
					e.preventDefault();
				});
				
				
			
				
			
				/********************************/
				//add tooltip for small view action buttons in dropdown menu
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				
				//tooltip placement on right or left
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
				
				
				
				
				/***************/
				$('.show-details-btn').on('click', function(e) {
					e.preventDefault();
					$(this).closest('tr').next().toggleClass('open');
					$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
				});
			})

			
			function delete_user(user_id) {
				var dialog = $( "#dialog-message").removeClass('hide').dialog({
						modal: true,
						title: " 删除用户确认",
						title_html: true,
						buttons: [ 
							{
								text: "取消",
								"class" : "btn btn-minier",
								click: function() {
									$( this ).dialog( "close" ); 
								} 
							},
							{
								text: "确认",
								"class" : "btn btn-primary btn-minier",
								click: function() {
										$.ajax({
										type: "DELETE",
										url: '/api/user/' + user_id,
										success: function () {
											console.log("delete successfully!");
											window.location.href="/admin/user/list";
										}
									});
									$( this ).dialog( "close" ); 
								} 
							}
						]
					});
			};
		</script>

	</body>
</html>
